<template>
  <div class="add-spu-img-con">
    <div class="tab">
      <div class="tab-item" v-for="(item, i) in tabs" :key="i" :class="{ active: currentTab == item.key }" @click="currentTab = item.key">{{ item.name }}</div>
    </div>
    <div class="clearfix">
      <ul class="img-con clearfix fl" v-if="picList.length">
        <li v-for="(item, i) of picList" :key="i" class="fl">
          <video :src="item.url" v-if="currentTab == 'productVideoList'" style="width: 160px; height: 160px" width="160" height="160" controls></video>
          <template v-else>
            <div class="master-map" v-if="i == 0"> 主图 </div>
            <div class="mask">
              <div class="btn-con">
                <icon-eye class="cursor" style="margin-right: 15px" @click="showImgPre(i)" />
              </div>
            </div>
            <a-image :src="item.url" width="100%" height="100%" />
            <a-image-preview-group v-model:visible="visible" v-model:current="currentPic" infinite :srcList="picList.map((e:any) => e.url)" />
          </template>
        </li>
      </ul>
      <a-empty v-else />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue'
  const props = defineProps({
    productInfo: {
      type: Object,
      default: () => {},
    },
  })
  const currentTab = ref('productPicList')
  const visible = ref(false)
  const currentPic = ref(0)
  const tabs = [
    { name: '橱窗图', key: 'productPicList' },
    { name: '视频', key: 'productVideoList' },
    { name: 'A+', key: 'productAddPicList' },
  ]
  const picList = computed(() => props.productInfo[currentTab.value] || [])
  // 预览图片
  const showImgPre = (index: number) => {
    currentPic.value = index
    visible.value = true
  }
</script>

<style lang="less" scoped>
  .add-spu-img-con {
    height: 100%;
    overflow-y: auto;
    .tab {
      display: flex;
      margin-bottom: 10px;
      .tab-item {
        height: 30px;
        line-height: 30px;
        text-align: center;
        width: 80px;
        border: 1px solid #d7d7d7;
        cursor: pointer;
      }
      .active {
        border-color: #5181f2;
        color: #5181f2;
      }
    }
    .img-con {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 160px;
        height: 160px;
        margin-right: 10px;
        margin-bottom: 5px;
        position: relative;
        .master-map {
          position: absolute;
          left: 0;
          top: 0;
          background-color: #2da641;
          text-align: center;
          height: 20px;
          width: 40px;
          z-index: 5;
          font-size: 12px;
          line-height: 20px;
          color: white;
        }

        &:hover .mask {
          display: block;
        }
        .mask {
          display: none;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          background: rgba(0, 0, 0, 0.5);
          .btn-con {
            width: 160px;
            color: white;
            font-size: 18px;
            text-align: center;
            margin-top: 76px;
            align-items: center;
          }
        }
      }
    }
  }
</style>
